<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="/venue/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/venue/css/homePage.css" />
		<link rel="stylesheet" href="/venue/css/searchCoach.css" />

	</head>
	<body>
		<div id="sc" class="container col-xl-12 ">
			<!-- pagehead navbar -->
			<div id="pageHead" class="">
				<!-- Brand/logo -->
				<div id="logoDiv" class="dropdown">
					<a class="navbar-brand  dropdown-toggle" data-toggle="dropdown"><span id="logoSpan">{{venue.nickname}}</span></a>
					<!--					  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
					<!--						  <span class="sr-only">Toggle Dropright</span>-->
					<!--					  </button>-->
					<div class="dropdown-menu">
						<a class="dropdown-item" href="homePage.html">首页</a>
						<a class="dropdown-item" href="dynamic.html">动态</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="#">退出</a>
					</div>
				</div>


				<!-- Links -->
				<div id="linksDiv">
					<ul class="nav nav-tabs nav-justified justify-content-end">
						<li class="nav-item">
							<a class="nav-link active" href="searchCoach.html">查看教练</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="searchVenue.html">查看场馆</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="followed.html">关注</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="message.html">通知</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="myCenter.html">场馆中心</a>
						</li>
					</ul>
				</div>

			</div>
			<!-- navbar end -->

			<!-- 分隔间距 -->
			<div id="separate"></div>
			<!-- 查询主体 -->
			<div id="findDiv">


				<!-- 条件区 -->
				<div id="condition">
					
					<div id="inputNickname"><input type="text" v-model="nickname" id="nickname" placeholder="你认识的教练名" /></div>
					<div id="styleId">
						<!-- <div id="styleName">
							<span>教练流派</span>
						</div> -->
						<div class="dropdown">
							<select style="background-color:royalblue;color:white" class="form-control" id="sel1" v-model="selected" @change="getStyleId">
							        <option value="0">流派不限</option>
							        <option v-for="style in styles" :value="style.styleId">{{style.styleName}}</option>
							</select>
						</div>
					</div>
					<div class="inputPrice"><input type="text" v-model="maxPrice" placeholder="限定课时费上限" /></div>
					<div class="inputPrice"><input type="text" v-model="minPrice" placeholder="限定课时费下限" /></div>
					<div class="isSomething" id="sign">签约教练</div>
					<div class="isSomething" id="full">非满课</div>
					<div class="isSomething" id="accept">接课中</div>
					<div class="isSomething" id="private">接受私教</div>
					<button id="search" @click="queryCoachesByCondition()" class="btn btn-primary btn-block">查找</button>
				</div>
				<!-- condition end  -->

				<!-- 结果展示区 -->
				<div id="results">
					<!-- row -->
<!--					<div class="row" style="float: left; margin-top: 20px;">-->
						<div v-for="coach in coaches" class="col-md-3 col-sm-5" style="float: left; margin-top: 20px;">
							<div class="box">
								<img :src="coach.avatar">
								<div class="box-content">
									<h3 class="title">{{coach.nickname}}</h3>
									<span class="post">{{coach.styleName}}</span>
									<ul class="icon">
										<li><a href="javascript:void(0);" @click="checkCoach(coach.cid)" data-toggle="tooltip" data-placement="bottom" title="点击查看教练详情!"><svg class="bi bi-search"
																																			 width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
													<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />
													<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />
												</svg><i class="fa fa-search"></i></a></li>
										<!-- <li><a href="#">fdasf<i class="fa fa-link"></i></a></li> -->
									</ul>
								</div>
							</div>
						</div>

<!--						<div class="col-md-3 col-sm-5" style="float: left; margin-top: 20px;">-->
<!--							<div class="box">-->
<!--								<img src="images/小亚索.jpg">-->
<!--								<div class="box-content">-->
<!--									<h3 class="title">蜘蛛侠</h3>-->
<!--									<span class="post">卡通恶搞造型</span>-->
<!--									<ul class="icon">-->
<!--										<li><a href="coachDetails.html" data-toggle="tooltip" data-placement="bottom" title="点击查看教练详情!"><svg class="bi bi-search"-->
<!--																																			 width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">-->
<!--													<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />-->
<!--													<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />-->
<!--												</svg><i class="fa fa-search"></i></a></li>-->
<!--										&lt;!&ndash; <li><a href="#">fsadfsa<i class="fa fa-link"></i></a></li> &ndash;&gt;-->
<!--									</ul>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->

<!--						<div class="col-md-3 col-sm-5" style="float: left; margin-top: 20px;">-->
<!--							<div class="box">-->
<!--								<img src="images/小亚索.jpg">-->
<!--								<div class="box-content">-->
<!--									<h3 class="title">蜘蛛侠</h3>-->
<!--									<span class="post">卡通恶搞造型</span>-->
<!--									<ul class="icon">-->
<!--										<li><a href="coachDetails.html" data-toggle="tooltip" data-placement="bottom" title="点击查看教练详情!"><svg class="bi bi-search"-->
<!--																																			 width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">-->
<!--													<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />-->
<!--													<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />-->
<!--												</svg><i class="fa fa-search"></i></a></li>-->
<!--										&lt;!&ndash; <li><a href="#">fsadfsa<i class="fa fa-link"></i></a></li> &ndash;&gt;-->
<!--									</ul>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->

<!--						<div class="col-md-3 col-sm-5" style="float: left; margin-top: 20px;">-->
<!--							<div class="box">-->
<!--								<img src="images/monkey.gif">-->
<!--								<div class="box-content">-->
<!--									<h3 class="title">钢铁侠</h3>-->
<!--									<span class="post">卡通恶搞造型</span>-->
<!--									<ul class="icon">-->
<!--										<li><a href="coachDetails.html" data-toggle="tooltip" data-placement="bottom" title="点击查看教练详情!"><svg class="bi bi-search"-->
<!--																																			 width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">-->
<!--													<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />-->
<!--													<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />-->
<!--												</svg><i class="fa fa-search"></i></a></li>-->
<!--										&lt;!&ndash; <li><a href="#"><i class="fa fa-link"></i></a></li> &ndash;&gt;-->
<!--									</ul>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--&lt;!&ndash;					</div>&ndash;&gt;-->
<!--&lt;!&ndash;					&lt;!&ndash; class="row" &ndash;&gt;&ndash;&gt;-->

<!--&lt;!&ndash;					&lt;!&ndash; row &ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;					<div class="row" style="float: left; margin-top: 20px;">&ndash;&gt;-->
<!--						<div class="col-md-3 col-sm-5" style="float: left; margin-top: 20px;">-->
<!--							<div class="box">-->
<!--								<img src="images/timg%20(1).jpg">-->
<!--								<div class="box-content">-->
<!--									<h3 class="title">雷神索尔</h3>-->
<!--									<span class="post">卡通恶搞造型</span>-->
<!--									<ul class="icon">-->
<!--										<li><a href="coachDetails.html" data-toggle="tooltip" data-placement="bottom" title="点击查看教练详情!"><svg class="bi bi-search"-->
<!--																																			 width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">-->
<!--													<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />-->
<!--													<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />-->
<!--												</svg><i class="fa fa-search"></i></a></li>-->
<!--										&lt;!&ndash; <li><a href="#">fdasf<i class="fa fa-link"></i></a></li> &ndash;&gt;-->
<!--									</ul>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->

<!--						<div class="col-md-3 col-sm-5" style="float: left; margin-top: 20px;">-->
<!--							<div class="box">-->
<!--								<img src="images/小亚索.jpg">-->
<!--								<div class="box-content">-->
<!--									<h3 class="title">蜘蛛侠</h3>-->
<!--									<span class="post">卡通恶搞造型</span>-->
<!--									<ul class="icon">-->
<!--										<li><a href="coachDetails.html" data-toggle="tooltip" data-placement="bottom" title="点击查看教练详情!"><svg class="bi bi-search"-->
<!--																																			 width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">-->
<!--													<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />-->
<!--													<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />-->
<!--												</svg><i class="fa fa-search"></i></a></li>-->
<!--										&lt;!&ndash; <li><a href="#">fsadfsa<i class="fa fa-link"></i></a></li> &ndash;&gt;-->
<!--									</ul>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->

<!--						<div class="col-md-3 col-sm-5" style="float: left; margin-top: 20px;">-->
<!--							<div class="box">-->
<!--								<img src="images/小亚索.jpg">-->
<!--								<div class="box-content">-->
<!--									<h3 class="title">蜘蛛侠</h3>-->
<!--									<span class="post">卡通恶搞造型</span>-->
<!--									<ul class="icon">-->
<!--										<li><a href="coachDetails.html" data-toggle="tooltip" data-placement="bottom" title="点击查看教练详情!"><svg class="bi bi-search"-->
<!--																																			 width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">-->
<!--													<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />-->
<!--													<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />-->
<!--												</svg><i class="fa fa-search"></i></a></li>-->
<!--										&lt;!&ndash; <li><a href="#">fsadfsa<i class="fa fa-link"></i></a></li> &ndash;&gt;-->
<!--									</ul>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->

<!--						<div class="col-md-3 col-sm-5" style="float: left; margin-top: 20px;">-->
<!--							<div class="box">-->
<!--								<img src="images/monkey.gif">-->
<!--								<div class="box-content">-->
<!--									<h3 class="title">钢铁侠</h3>-->
<!--									<span class="post">卡通恶搞造型</span>-->
<!--									<ul class="icon">-->
<!--										<li><a href="coachDetails.html" data-toggle="tooltip" data-placement="bottom" title="点击查看教练详情!"><svg class="bi bi-search"-->
<!--																																			 width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">-->
<!--													<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 0 1 1.415 0l3.85 3.85a1 1 0 0 1-1.414 1.415l-3.85-3.85a1 1 0 0 1 0-1.415z" />-->
<!--													<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z" />-->
<!--												</svg><i class="fa fa-search"></i></a></li>-->
<!--										&lt;!&ndash; <li><a href="#"><i class="fa fa-link"></i></a></li> &ndash;&gt;-->
<!--									</ul>-->
<!--								</div>-->
<!--							</div>-->
<!--						</div>-->
<!--					</div>-->
<!--					&lt;!&ndash; class="row" &ndash;&gt;-->


				</div>
				<!-- 结果区 end -->

				<!-- 页码导航 -->
				<div id="pageNav">
					<div id="pageDiv">
						<ul class="pagination">
							<li class="page-item" :class="{disabled:prev}"  @click="forwardOne()"><a  class="page-link" href="javascript:void(0);">Previous</a></li>
							<li class="page-item"  :class="{active:n==pageCode}" v-for="n in totalPage"  @click="queryThisPage(n)"><a class="page-link" href="#">{{n}}</a></li>
<!--							<li class="page-item active"><a class="page-link" href="#">2</a></li>-->
<!--							<li class="page-item"><a class="page-link" href="#">3</a></li>-->
							<li class="page-item" :class="{disabled:next}" @click="backOne()"><a  class="page-link" href="javascript:void(0);">Next</a></li>
						</ul>
					</div>

				</div>
				<!-- 页码导航 end-->
			</div>
			<!-- findDiv end -->
		</div>
		<!-- container end -->

	</body>
	<script src="/venue/js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="/venue/js/axios.js" type="text/javascript" charset="utf-8"></script>
	<script src="/venue/js/axios_interceptor.js" type="text/javascript" charset="UTF-8"></script>
	<script src="/venue/js/jquery.min.js"></script>
	<script src="/venue/js/popper.min.js"></script>
	<script src="/venue/js/bootstrap.min.js"></script>
	<script src="/venue/js/searchCoach.js"></script>

</html>
